<template>
  <div class="goodsInfo-container">
      <!-- 购物车小球动画 -->
      <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
          <div class="ball" v-show="ballFlag" ref="ball"></div>
      </transition>

    <!-- 商品轮播图区域 -->
    <div class="mui-card">
        <swiper :lunbotuList="lunbotu" :isfull="false"></swiper>
    </div>

    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsInfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p class="price">
                市场价：<del>￥{{goodsInfo.market_price}}</del>&nbsp;&nbsp;
                销售价：<span class="now_price">￥{{goodsInfo.sell_price}}</span>
            </p>
            <p>购买数量：
                <numBox class="mui-number" @getcount="getSelectedCount" :max="goodsInfo.stock_quantity"></numBox>
            </p>
            <p>
                <mt-button type="primary" size="small">立即购买</mt-button>
                <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                <!-- 
                    如何将num_box的数量和购物车显示的数量同步？
                    1、按钮属于goodsinfo组件页面，数字属于num_box组件
                    2、涉及到了父子组件的嵌套了，所以无法直接在goodsinfo页面中获取到选中的商品数量制值
                    3、子组件向父组件传值（事件调用机制）
                    4、父向子传递方法，子调用这个方法，同时把数据当做参数传递过来
                 -->
            </p>
        </div>
      </div>
    </div>

    <!-- 商品参数区域 -->
    <div class="mui-card">
        <div class="mui-card-header">商品参数</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <p>商品货号：{{goodsInfo.goods_no}}</p>
                <p>商品情况：{{goodsInfo.stock_quantity}}件</p>
                <p>上架时间：{{goodsInfo.add_time | dateFormat}}</p>
            </div>
        </div>
        <div class="mui-card-footer">
            <mt-button type="primary" 
                size="large" plain  
                @click="goDesc(id)">
                图文介绍
            </mt-button>
            
            <mt-button type="danger" 
                size="large" plain  
                @click="goComment(id)">     
                    商品评论
            </mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from '../subcomponents/swiper.vue';
//导入数字选择框
import numBox from '../subcomponents/goodsinfo_numbox.vue';
export default {
    data() {
        return {
            id: this.$route.params.id, //将路由参数中的id挂载data,方便后面调用
            lunbotu:[], //轮播图的数据
            goodsInfo:{}, //获取到的商品的信息
            ballFlag: false, //控制小球的隐藏和显示的标识
            selectedCount:1 //保存用户选中的商品数量，默认买一个
        };
    },
    created() {
        this.getLunbotu();
        this.getGoodsInfo();
    },
    mounted(){
    },
    methods: {
        getLunbotu(){
            this.$http.get('getthumimages/'+this.id).then(res => {
                if(res.body.status === 0){
                    res.body.message.forEach(ele => {
                        ele.img_url = ele.src;
                        ele.url = ele.src;
                    });
                     this.lunbotu = res.body.message;
                }
            })
        },
        getGoodsInfo(){
            //获取商品的信息
            this.$http.get('goods/getinfo/'+this.id).then(res => {
                if(res.body.status === 0){
                    this.goodsInfo = res.body.message[0];
                }
            })
        },
        goDesc(id){
            //点击使用编程式导航，跳转到图文介绍页面
            this.$router.push({
                name:'GoodsDesc',
                params:{
                    id:id
                }
            })
        },
        goComment(id){
            //点击使用编程式导航，跳转到评论页面
            this.$router.push({
                name:"GoodsComment",
                params:{
                    id:id
                }
            })
        },
        addToShopCar(){
            //添加到购物车
            this.ballFlag = !this.ballFlag;
            /* 
            注意：
                { 
                    id:商品的id, 
                    count: 要购买的数量, 
                    price: 商品的单价，
                    selected: false  
                }
            拼接出一个，要保存到 store 中 car 数组里的 商品信息对象 */
            var goodsinfo = {
                id:this.id,
                count:this.selectedCount,
                price:this.goodsInfo.sell_price,
                selected:true
            }
            // 调用 store 中的 mutations 来将商品加入购物车
            this.$store.commit('addToCar',goodsinfo);
        },
        //小球购物车动画
        beforeEnter(el){
            el.style.transform = "translate(0,0)";
        },
        enter(el,done){
            el.offsetWidth;
            //小球的位置放在购物车右上角
            /* 
                小球动画优化（需要适配不同的分辨率）思路：
                1、导致动画不准确的本质原因“我们把小球最终位移的位置，写死了；
                2、只要分辨率和测试的时候不一样，或者滚动条有一定的距离之后就不准确的了。
                3、所以我们不能把位移的的位置坐标写死了，应该根据不同的情况动态计算
                
                如何实现坐标的计算：
                1、先得到最下方购物车徽标的坐标，然后再得到小球的坐标，然后求坐标差，
                得到的结果就是小球需要位移的距离。
                2、获取购物车徽标和小球的位置？  domObject.getBoundingClientRect()
            */

            //获取小球在页面中的位置
            const ballPosition = this.$refs.ball.getBoundingClientRect();
            //获取购物车徽标的位置
            const badge = document.getElementById('badge').getBoundingClientRect();
            
            const xDist = badge.left - ballPosition.left;
            const yDist = badge.top - ballPosition.top;
            //插值表达式
            el.style.transform = `translate(${xDist}px, ${yDist}px)`;
            el.style.transition = 'all 1s cubic-bezier(0.4,-0.3,1,0.68)';
            //这里的done其实就是afterEnter函数
            done();
        },
        afterEnter(el){
            this.ballFlag = !this.ballFlag;
        },
        getSelectedCount(count){
            //当子组件把选中的数量传递给父组件的时候，把选中的值保存在data上
            this.selectedCount = count;
            console.log('父组件拿到的值为：'+count);
        }
    },
    components:{
        swiper,
        numBox
    }
};
</script>

<style lang="scss" scoped>
    .goodsInfo-container{
        background-color: #eee;
        overflow: hidden;
    }

    .now_price{
        color: red;
        font-size: 16px;
        font-weight: bold;
    }
    .mui-card-footer{
        display: block;
        button{
            margin: 15px 0;
        }
    }
    .ball{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        z-index: 99;
        left: 148px;
	    top: 380px;
    }
</style>